<template>
    <div class="container">
        <mt-header title="外卖盲盒">
            <router-link to="/home" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
        </mt-header>
        <el-tabs v-model="activeName" @tab-click="handleClick"  style="background-color:#fff">
            <el-tab-pane label="午餐盲盒" name="first"></el-tab-pane>
            <el-tab-pane label="下午茶盲盒" name="second"></el-tab-pane>
            <el-tab-pane label="晚餐盲盒" name="third"></el-tab-pane>
            <el-tab-pane label="夜宵盲盒" name="fourth"></el-tab-pane>
        </el-tabs>
        <div class="body">
            <div class="gray" v-if="tag!=0">
                <div class="black">
                    <img src="../images/已超时.svg" v-if="tag==-1">
                    <img src="../images/未开通.svg" v-if="tag==1">
                </div>
            </div>
            <div class="select">
                <span>选择盲盒类型:</span>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <span class="button" @click="getMysteryBox(value)">开启</span>
            </div>
            <div class="box" v-if="list!=null">
                <div v-for="(index,i) in list" :key="i">
                    <div class="card" @click="getCard(index)" :class="{disabled:chooseIndex!=null}" v-if="index==null||index.chooseIndex!=chooseIndex">
                        <span><img src="../images/卡牌.svg"></span>
                        <span>
                            <p class='tip'>正</p><p class='tip'>在</p><p class='tip'>开</p><p class='tip'>启</p>
                        </span>
                    </div>
                    <div class="card disabled" v-if="index!=null&&index.chooseIndex==chooseIndex">
                        <div class="choose">
                            <img :src="index.shopUrl">
                            <p>{{index.shopName}}</p>
                            <p class="chooseButton" @click.prevent="getBoxMessage">显示详情</p>
                        </div>
                    </div>
                    <el-dialog
                        title="盲盒详情"
                        :visible.sync="dialogVisible"
                        width="80%"
                        :before-close="handleClose"
                        v-if="moreMessage.startTime!=undefined"
                        >
                        <div class="dialogBox">
                            <div>
                                <img :src="list[chooseIndex].shopUrl">
                            </div>
                            <div>
                                <p class="title">{{list[chooseIndex].shopName}}</p>
                                <p>{{moreMessage.startTime}}到{{moreMessage.endTime}}</p>
                                店铺无门槛立减<p class='organ'>{{moreMessage.reduction/100}}</p>元
                            </div>
                            <div></div>
                            <div><button @click="gotoShop">去使用</button></div>
                        </div>
                    </el-dialog>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapMutations} from 'vuex'
    export default{
        data(){
            return{
                activeName:"first",
                activityTime:null,
                options: [],
                value: '',//选择的数据
                list:null,
                chooseIndex:null,//已选选择的盲盒位置
                chooseId:null,//选择的红包ID
                dialogVisible:false,
                moreMessage:{},//选择红包的详细信息
                tag:0,//-1表示已经结束，0表示正在进行,1表示还未开始
            }
        },
        mounted(){
            this.handleClick();
        },
        methods:{
            ...mapMutations(['setShopId']),
            init(){
                this.activityTime=null;
                this.options=[];
                this.value='';//选择的数据
                this.list=null;
                this.chooseIndex=null;//已选选择的盲盒位置
                this.chooseId=null;//选择的红包ID
            },
            async useOrNot(){//判断用户是否已经抽取过该时间段的盲盒
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                let postData={
                    activityTime:this.activityTime,
                }
                await this.getRequest('/activity/checkActivityUse',postData,tokenStr).then(response=>{
                    if(response.code==200){
                        this.chooseId=response.obj;
                    }
                })
            },
            async getMysteryBoxType(){//获取盲盒的所有类型
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                let postData={
                    activityTime:this.activityTime
                }
                await this.getRequest('/activity/getAllactivityType',postData,tokenStr).then(response=>{
                    if(response.code==200){
                        for(let i in response.obj){
                            if(i==0)
                                this.value=response.obj[i];//默认选项
                            let obj={
                                value:response.obj[i],
                                label:response.obj[i]
                            };
                            this.options.push(obj);
                        }
                    }
                })
            },
            async getMysteryBox(){//获取9个随机的盲盒
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                let postData=this.$qs.stringify({
                    activityTime:this.activityTime,
                    shopLabel:this.value
                });
                await this.postRequest('/activity/createActivityBoxes',postData,tokenStr).then(response=>{
                    if(response.code==200){
                        this.list=[];
                        for(let i in response.obj){
                            let obj=response.obj[i];
                            obj.shopUrl='/file'+obj.shopUrl;
                            this.list.push(obj);
                        }
                    }
                })
            },
            async getChooseBox(){//如果已经抽取过该时间段的盲盒，获取已经抽取的盲盒的信息
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                let postData={
                    redParperId:this.chooseId
                }
                await this.getRequest('/activity/getActivityOrder',postData,tokenStr).then(response=>{
                    if(response.code==200){
                        this.list=[null,null,null,null,null,null,null,null,null];
                        this.list[response.obj.chooseIndex]=response.obj;
                        this.value=response.obj.shopLabel;
                        this.list[response.obj.chooseIndex].shopUrl='/file'+this.list[response.obj.chooseIndex].shopUrl;
                        this.chooseIndex=response.obj.chooseIndex;
                    }
                })
            },
            async getBoxMessage(){//点击查看详情，获取其他具体信息
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                let postData={
                    redParperId:this.chooseId
                }
                await this.getRequest('/redPaper/getredParperByIdWithActivity',postData,tokenStr).then((response)=>{
                    if(response.code==200){
                        this.moreMessage=response.obj;
                        this.moreMessage.startTime=this.moreMessage.startTime.replace(/T/," ");
                        this.moreMessage.endTime=this.moreMessage.endTime.replace(/T/," ");
                        this.moreMessage.startTime=this.moreMessage.startTime.slice(0,16);
                        this.moreMessage.endTime=this.moreMessage.endTime.slice(0,16);
                        this.dialogVisible=true;
                    }
                })
            },
            setActivityTime(year,month,day,hours){
                let time=year;
                if(month<10)
                    time=time+'-0'+month;
                else time=time+"-"+month;
                if(day<10)
                    time=time+"-0"+day;
                else time=time+"-"+day;
                if(hours<10)
                    time=time+" 0"+hours+":00:00";
                else time=time+" "+hours+":00:00"
                this.activityTime=time;
                this.nowTime=new Date();//现在的时间
                this.startTime=new Date(this.activityTime);//结束的时间比开始的时间长4小时=4*60*60秒
                if(this.nowTime.getTime()<this.startTime.getTime())//时间还没到
                    this.tag=1;
                else if(this.nowTime.getTime()>(this.startTime.getTime()+4*60*60*1000))//已超时
                    this.tag=-1;
                else this.tag=0;//正好赶上
            },
            async handleClick(){
                this.init();
                this.nowTime=new Date();//现在的时间
                var day=this.nowTime.getDate();
                var month=this.nowTime.getMonth();
                var year=this.nowTime.getFullYear();
                if(this.activeName=='first')
                    this.setActivityTime(year,month+1,day,10);
                else if(this.activeName=='second')
                    this.setActivityTime(year,month+1,day,14);
                else if(this.activeName=='third')
                    this.setActivityTime(year,month+1,day,16);
                else if(this.activeName=='fourth')
                    this.setActivityTime(year,month+1,day,21);
                await this.useOrNot();//判断用户是否已经抽取过该时间段的盲盒
                    if(this.chooseId!=null){//该用户该时间段已经抽取了盲盒
                        await this.getChooseBox();//如果已经抽取过该时间段的盲盒，获取已经抽取的盲盒的信息
                    }else{//该用户该时间段还未抽取了盲盒
                        this.getMysteryBoxType();//获取盲盒的所有类型
                }
            },
            handleClose(){
                this.dialogVisible=false;
            },
            async getCard(index){
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                let postData={
                    activityTime:this.activityTime,
                    shopId:index.shopid,
                    redShopParperId:index.redShopParperId,
                    shopLabel:index.shopLabel,
                    chooseIndex:index.chooseIndex
                }
                //确认抽取盲盒后给后端发送数据
                await this.getRequest('/activity/createActivityRedparper',postData,tokenStr).then(response=>{
                    if(response.code==200){
                        this.chooseId=response.obj;
                    }
                })
                setTimeout(()=>{
                    this.chooseIndex=index.chooseIndex;
                },500);
            },
            gotoShop(){//去使用
                this.setShopId(this.list[this.chooseIndex].shopid);
                this.$router.push('shop');
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import 'mint-ui/lib/style.css';
    @import '../style/mixin';
    *{
        margin: 0;
        padding: 0;
    }
    /deep/ .el-tabs__item{
        font-size:18px;
    }
    /deep/ .el-tabs__header{
        margin:0;
    }
    /deep/ .el-tabs__nav{
        padding:0.2rem;
    }
    /deep/ .el-input__inner{
        font-size: 1rem;
        margin-left: 0.5rem;
    }
    /deep/ .el-dialog__header{
        padding:10px 20px 10px;
        border-bottom: 1px solid #f1f1f1;
    }
    /deep/ .el-dialog__title{
        color:#fff;
    }
    /deep/ .el-dialog__body{
        padding:15px 15px;
    }
    .container{
        @include white;
        .body{
            position: relative;
            .gray{
                position: absolute;
                @include width-height(100%,110vw);
                z-index: 999;
                .black{
                    @include width-height(100%,110vw);
                    background-color:#ccc;
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0.5;
                    border-radius: 1.2rem;
                    padding-bottom: 0.2rem;
                    padding-top: 0.5rem;
                    border-bottom: 2px solid #f1f1f1;
                }
                img{
                    @include width-height(80%,80vw);
                    padding-top:18%;
                    padding-left: 10%;
                }
            }
        }
        .select{
            margin-top:0.5rem;
            span{
                @include font-size-color(1rem,#000);
                padding-left: 0.5rem;
            }
            .button{
                @include font-size-color(1rem,#fff);
                @include blue;
                display: inline-block;
                padding: 0.5rem 1rem;
                @include width-height(2rem,1.5rem);
                position :absolute;
                right: 5%;
                border-radius: 0.5rem;
            }
        }
        .box{
            display: grid;
            grid-template-columns: 33.33% 33.33% 33.33%;
            grid-template-rows: 33.33% 33.33% 33.33%;
            @include width-height(100%,100vw);
            .disabled{//已经翻过1张牌之后，阻止其他翻牌
                pointer-events: none;
            }
            .card{
                @include width-height(80%,90%);
                margin:5% 10% 5% 10%;
                position: relative;
                transform-style: preserve-3d;
                perspective: 500px;
                transform: rotateY(5deg);
                span{
                    background: rgb(195, 212, 250);
                    box-shadow: 4px 4px 5px #999;//加阴影
                    position: absolute;
                    display: block;
                    transition:all 0.5s linear;
                    @include width-height(100%,100%);
                    .tip{
                        text-align: center;
                        margin-top:0.2rem;
                        @include font-size-color(1.5rem,#fff);
                    }
                }
                .choose{
                    background: rgb(195, 212, 250);
                    box-shadow: 4px 4px 5px #999;//加阴影
                    @include width-height(100%,100%);
                    img{
                        margin:5% 0 0 30%;
                        border: 1px solid #666;
                        border-radius: 0.5rem;
                        @include width-height(40%,auto);
                    }
                    p{
                        margin-top:0.5rem;
                        font-weight: bold;
                        text-align: center;
                    }
                    .chooseButton{
                        @include blue;
                        @include font-size-color(1rem,#fff);
                        border-radius: 0.5rem;
                        padding:0.5rem 0 0.5rem 0;
                        margin:0.5rem 1rem 0.5rem 1rem;
                        pointer-events: all;
                    }
                }
                img{
                    @include width-height(100%,100%);
                }
                span:nth-child(1){
                    transform: rotateY(0deg);
                    z-index: 2;
                }
                span:nth-child(2){
                    transform: rotateY(180deg);
                    z-index: 1;
                }
            }
            .card:hover span:nth-child(1){
                transform: rotateY(180deg);
                z-index: 1;
            }
            .card:hover span:nth-child(2){
                transform: rotateY(360deg);
                z-index: 2;
            }
        }
        .dialogBox{
            display: grid;
            @include width-height(100%,6rem);
            grid-template-rows: 70% 30%;
            grid-template-columns: 20% 80%;
            p{
                @include font-size-color(0.9rem,#666);
            }
            img{
                @include width-height(80%,80%);
            }
            .title{
                @include font-size-color(1.2rem,#000);
            }
            .organ{
                display: inline;
                padding:0 0.2rem 0 0.2rem;
                @include font-size-color(1.2rem,rgba(231, 73, 25, 0.87));
                font-weight: bold;
            }
            button{
                position: absolute;
                right: 2rem;
                @include blue;
                @include font-size-color(1rem,#fff);
                padding:0.2rem 0.5rem 0.2rem 0.5rem;
                border-radius: 0.5rem;
                border:none;
            }
        }
    }
</style>